<template>
  <div>
    <a-breadcrumb>
      <a-breadcrumb-item>
        <a @click="artAdd">文章管理</a>
      </a-breadcrumb-item>
      <a-breadcrumb-item>增加文章</a-breadcrumb-item>
    </a-breadcrumb>

    <a-form :form="form">
      <a-form-item
        :label-col="{span: 4}"
        :wrapper-col="{span: 8}"
        label="文章标题"
      >
        <a-input
          v-decorator="[
          'title',
          { rules: [{ required: true, message: '请填写文章标题' }] },
        ]"
        />
      </a-form-item>

      <a-form-item
        :label-col="{span: 4}"
        :wrapper-col="{span: 8}"
        label="文章作者"
      >
        <a-input
          v-decorator="[
          'author',
          { rules: [{ required: true, message: '请填写文章作者' }] },
        ]"
        />
      </a-form-item>

      <a-form-item
        :label-col="{span: 4}"
        :wrapper-col="{span: 8}"
        label="文章描述"
      >
        <a-input
          v-decorator="[
          'desc',
          { rules: [{ required: true, message: '请填写文章描述' }] },
        ]"
        />
      </a-form-item>

       <a-form-item  :label-col="{span: 4}" :wrapper-col="{span: 8}" label="封面图片"  extra="">
      <a-upload
        v-decorator="[
          'upload',
        ]"
        name="img"
        action='http://rap2api.taobao.org/app/mock/275133/api/v1/uploadimg'
        list-type="picture"
        :headers="headers"
      >
        <a-button> <a-icon type="upload" /> 上传图片 </a-button>
      </a-upload>
    </a-form-item>

      <a-form-item
        :label-col="{span: 4}"
        :wrapper-col="{span: 8}"
        label="编辑详情"
      >
         <div id="content"></div>
      </a-form-item>

      <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8, offset: 4 }">
        <a-button type="primary" @click="onFinish">增加</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import E from 'wangeditor'
import { message } from 'ant-design-vue'
import { fetchArtAdd } from 'api'
export default {
  data () {
    return {
      params: {},
      editor: '',
      form: this.$form.createForm(this),
      headers: {
        authorization: 'authorization-text'
      },
      thumb: ''
    }
  },
  mounted () {
    this.initEditor() // 渲染富文本
  },
  methods: {
    artAdd () {
      this.$router.push('/admin/artLists')
    },
    // 渲染富文本
    initEditor () {
      const editor = new E('#content')
      editor.create()
      this.editor = editor
    },
    onFinish () {
      this.form.validateFields(err => {
        if (!err) {
          this.params = {
            // 将所有的数据都存放在params里面
            ...this.form.getFieldsValue(),
            content: this.editor.txt.html()
          }

          fetchArtAdd(this.params).then(res => {
            // 增加文章
            if (res.data.code === 200) {
              // 弹出提示框提醒成功或失败
              message.success(res.data.msg, 2, () => {
                this.$router.go(0)
              })
            }
          })
        }
      })
    },
    handleChange (info) { // 上传图片的
      if (info.file.status !== 'uploading') {
        // console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        this.thumb = info.fileList[0].response.data.thumb
        message.success('上传成功')
      } else if (info.file.status === 'error') {
        message.error('上传失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
